<template>
    <div>
        <div>
         <!-- <div style="margin-bottom: 20px;font-weight: bold;font-size:20px;">自动委托中</div> -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item label="商品:" prop="goodsNo">
                        <el-select v-model="ruleForm.goodsNo" placeholder="请选择商品" :disabled="readonly">
                                <el-option
                                    v-for="(item,id) in goodname"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.goods_no">
                                </el-option>
                            </el-select>
                </el-form-item>
                <el-form-item>
                        <span>委托设置：</span>
                        <span>委托总量控制在</span><span class="line">
                        <input type="text" v-model="ruleForm.allCount" placeholder="请输入正整数" class="input-css" :readonly="readonly" ></span> 手内,
                        <span class="line"><input v-model="ruleForm.allTime" placeholder="请输入正整数" :readonly="readonly" class="input-css"></span>分钟内，每分钟执行
                        <span class="line"><input v-model="ruleForm.time" placeholder="请输入正整数" :readonly="readonly" class="input-css"></span>次委托订单,每次最低1手，最高随机
                        <span class="line"><input v-model="ruleForm.count" placeholder="随机取值(1-20)" :readonly="readonly" class="input-css"></span>手。
                </el-form-item>
                <el-form-item label="委托订单规则：" prop="checkedCities1">
                        <el-checkbox-group 
                        v-model="ruleForm.checkedCities1"
                        @change="changelist(ruleForm.checkedCities1)"
                       >
                        <el-checkbox  :label="1">以涨停板价格 ，委托购买</el-checkbox>
                        <el-checkbox  :label="2">以跌停板价格 ，委托寄售</el-checkbox>
                        <!-- <el-checkbox  :label="2" :key="2">以跌停板价格 ，委托寄售委托</el-checkbox> -->
                      </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" :disabled="disable">{{nametime}}</el-button>
                    <!-- <el-button type="warning" @click="resetForm('ruleForm')" v-if="overtime"></el-button> -->
                    <el-button type="warning" @click="stopclick(2)" v-if="overtime">{{stoptime}}</el-button>

                </el-form-item>
        </el-form>
           
           
        </div>
       
       
    </div>

</template>
<script>
   export default{
       data(){
           return{
            nametime:'开始委托',
            stoptime:'停止委托',
            checkedCities1:[],
            overtime:false,
           
            ruleForm:{
                userId:JSON.parse(localStorage.getItem('userInfo')).userId,
                goodsNo	:'',
                type:'',
                checkedCities1:[],
                allCount:'',
                allTime:'',
                count:'',
                time:'',
                state:0
            },
           
            rules:{
                goodsNo	: [
                    { required: true, message: '请选择商品', trigger: 'change' }
                ],
                checkedCities1: [
                    { type: 'array', required: true, message: '请选择委托订单规则', trigger: 'change' }
                ],
            },
            
            readonly:false,
            disable:false,
            goodname:[],
            
            id:'',
            oldMinut:''
           }
       },
       methods: {
        changelist(id){
            console.log(id,id)
            this.ruleForm.type = id.join(',');
            console.log(id.join(','))
        },
        submitForm(formName) {
            // console.log(this.nametime,'baner')
            this.ruleForm.state = 1
            if(this.ruleForm.allCount < (this.ruleForm.allTime*this.ruleForm.count*this.ruleForm.time)) {
                return this.$message({
                        type: 'error',
                        message: '委托总量不足'
                    });  
            }
            if(this.nametime == '委托中'){
               return this.$message({
                        type: 'error',
                        message: '当前已在委托中'
                    });  
                  
            }
           
            // if(this.ruleForm.allCount == ''){
            //    return  this.$message({
            //                 type: 'error',
            //                 message: '数据不可为空'
            //             });
            //  }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            
            //  debugger
          if(this.ruleForm.allCount == undefined){
               return this.$message({
                            type: 'error',
                            message: '数据不可为空'
                        });
           }
           if(this.ruleForm.allTime == ''){
            return this.$message({
                            type: 'error',
                            message: '数据不可为空'
                        });
           }
           if(this.ruleForm.count == ''){
            return this.$message({
                            type: 'error',
                            message: '数据不可为空'
                        });
           }
           if(this.ruleForm.time == ''){
            return this.$message({
                            type: 'error',
                            message: '数据不可为空'
                        });
           }
           this.addAutoEntrust();
           
          
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      stopclick(){
          if(this.stoptime == '已停止委托'){
            return this.$message({
                        type: 'error',
                        message: '您已停止委托'
                    });   
          }
        this.$confirm('确认要停止委托？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.updateAutoEntrust()
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                    });
         
      },
        async listGoods(){
            let {data} = await this.$post({
                api:'/menu/listGoods',
                
            })
            if(data.code === 0){
                this.goodname = data.data;
                console.log(data)
                // console.log(data)
            }
        },
        async addAutoEntrust(){
            let {data} = await this.$post({
                api:'/tran/addAutoEntrust',
                data:this.ruleForm
               
            })
            if(data.code === 0){
               this.oldMinut = new Date().getMinutes();
                this.getAutoEntrust();
                // console.log(data)
            }else{
                this.$message({
                        type: 'error',
                        message: data.msg
                    });     
            }
        },
        async getAutoEntrust(){
            // var state = ''
            // if(this.nametime == '开始委托'){
            //     state = 1
            // }else {
            //     state = 2
            // }
            let {data} = await this.$post({
                api:'/tran/getAutoEntrust',
                data:{
                    userId:JSON.parse(localStorage.getItem('userInfo')).userId,
                    state: Math.ceil(Math.random() * 100)
                }
            })
            if(data.code === 0){
               this.ruleForm.goodsNo = data.data.goodsNo;
               this.ruleForm.allCount = data.data.allCount;
               this.ruleForm.allTime = data.data.allTime;
               this.ruleForm.count = data.data.count;
               this.ruleForm.time = data.data.time;
               this.ruleForm.state = data.data.state;
               this.ruleForm.type = data.data.type;
            //    data.data.type = '2,3'
            //    console.log(((data.data.type).toString()).split(','),'split');
               let arr = ((data.data.type).toString()).split(',')
               let arr1 = []
               arr.forEach(element => {
                element =  Number(element)
                arr1.push(Number(element))
               
                });
               
               this.ruleForm.checkedCities1 = arr1;
               this.id = data.data.id;
               var stateNum = data.data.state
               if(stateNum == 0){
                this.nametime = '开始委托';
               
               }else if(stateNum == 1){
                this.nametime = '委托中';
                this.stoptime = '停止委托';
                this.readonly = true;
                this.overtime = true;
                // debugger
            //     let nowTime = new Date().getMinutes();
            //     console.log(this.oldMinut,'this.oldMinut');
            //     console.log(nowTime)
               var timecount = setTimeout(()=>{
                   console.log('到时间了')
                
                // this.nametime = '开始委托';
                // this.stoptime = '已停止委托';
                // this.overtime = true;
                // this.readonly = false;
                // stateNum = 2;
                // console.log(stateNum,'stateNum')
                this.getAutoEntrust();
               },60000)
               
                // if(this.oldMinut + this.ruleForm.allTime == nowTime){
                //     this.nametime = '开始委托';
                //     this.stoptime = '已停止委托';
                //     this.overtime = true;
                //     this.readonly = false;
                   
                // }
                // this.disable = true;
               
               }else if(stateNum == 2){
                this.nametime = '开始委托';
                this.stoptime = '已停止委托';
                this.overtime = true;
                this.readonly = false;
                // clearTimeout(timecount);
                // this.ruleForm.goodsNo = '';
                // this.ruleForm.allCount = '';
                // this.ruleForm.allTime = '';
                // this.ruleForm.count = '';
                // this.ruleForm.time = '';
                // this.ruleForm.state = '';
                // this.ruleForm.checkedCities1.length = 0;
                // this.ruleForm.type = '';
               }
           
            }else{

            }
        },
        async updateAutoEntrust(){
            let {data} = await this.$post({
                api:'/tran/updateAutoEntrust',
                data:{
                    id:this.id,
                    state:2
                }
            })
            if(data.code === 0){
                this.nametime = '开始委托';
                this.disable = false;
                this.getAutoEntrust();
                // console.log(data)
            }
        },
        allTimeCount(){
            // let oldMinut = new Date().getMinutes();
            
            if(this.ruleForm.allTime){

            }
          
        }
        
       },
       mounted () {
           this.listGoods();
           this.getAutoEntrust();
       }
   }
</script>
<style lang="scss" scoped>
.input-css{
    outline:none ;
    background:transparent ;
    border:none ;
    width:150px;
    text-align: center;
    /* outline:medium; */
}
.line{
display: inline-block;
width:150px;
height:30px;
border-bottom: 1px solid #000;
margin:20px;
text-align: center;
}
</style>